<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="../css/elementUI.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/elementUI.js"></script>
    <script src="../js/util.js"></script>
</head>
<body>
<div id="app">
    <el-input
            placeholder="分类名" style="width: 180px;"
            v-model="query.susName"
            clearable>
    </el-input>
    <el-select v-model="query.suSex" placeholder="性别搜索" clearable>
        <el-option label="男" value="1"></el-option>
        <el-option label="女" value="2"></el-option>
        <el-option label="未知" value="0"></el-option>
    </el-select>
    <el-input
            placeholder="年龄" style="width: 180px;"
            v-model="query.age1"
            clearable>
    </el-input>--
    <el-input
            placeholder="年龄" style="width: 180px;"
            v-model="query.age2"
            clearable>
    </el-input>
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="susName"
                label="分类名">
        </el-table-column>
        <el-table-column
                prop="suCode"
                label="用户登录名">
        </el-table-column>
        <el-table-column
                prop="suName"
                label="用户姓名">
        </el-table-column>
        <el-table-column
                prop="suSex"
                label="性别">
            <template slot-scope="scope">
                {{scope.row.suSex==0?'未知':(scope.row.suSex==1?'男':'女')}}
            </template>
        </el-table-column>
        <el-table-column
                prop="suAge"
                label="年龄">
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="PageInfo.total">
    </el-pagination>
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            tableData: [],
            query:{
                page:1,
                size:5
            },
            PageInfo:{
                total:0
            }
        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initData();
                }
            }
        },
        methods:{
            initData(){
                axios.post(`/sysuser/findPage`,this.query).then(res=>{
                    this.tableData=res.data.records;
                    this.PageInfo.total=res.data.total;
                })
            },
            handleSizeChange(val) {
                this.query.size=val;
            },
            handleCurrentChange(val) {
                this.query.page=val;
            },
        },
        created(){
            this.initData()
        }
    })
</script>
</body>
</html>